<template>
    <!-- 3用户抗定位 -->
    <div>
      <div class="tc">
        
        <!-- 抗定位任务配置弹窗 -->
        <el-dialog class="maindialog" title="抗定位任务配置" :visible.sync="dialogFormVisible" width="800px"
                   z-index="1000">
          <el-form :model="form" ref="form">
            <el-descriptions title="风险信息" :column="2">
              <el-descriptions-item label="用户名">
                {{ showData.username }}
              </el-descriptions-item>
              <el-descriptions-item label="泄露地点">
                {{ showData.locationLeak }}
              </el-descriptions-item>
              <el-descriptions-item label="泄露坐标">
                ({{ showData.locationLat }},{{ showData.locationLon }})
              </el-descriptions-item>
              <el-descriptions-item label="定位地点">
                {{ showData.locationPos }}
              </el-descriptions-item>
            </el-descriptions>
            <el-form-item label="抗定位方式：" :label-width="formLabelWidth" prop="method">
              <el-radio v-model="form.method" label="社交内容混淆">社交内容混淆</el-radio>
              <el-radio v-model="form.method" label="社交关系混淆">社交关系混淆</el-radio>
            </el-form-item>
            <el-form-item label="设置混淆后位置：" :label-width="formLabelWidth" prop="targetLocation">
              <el-select  v-model="form.targetLocation" style="width: 190px" placeholder="请选择想要混淆到的地点" clearable>
              <el-option
                v-for="dict in dict.type.confuse_city"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
              </el-select>
            </el-form-item>
          </el-form>
  
          <el-alert title="该操作会修改用户社交内容与社交关系，请谨慎操作！" type="warning" show-icon
                    style="width: 250px; position: relative; left: 400px; top: -70px"/>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">
              取 消
            </el-button>
            <el-button type="primary" @click="submitForm">
              确 定
            </el-button>
          </div>
        </el-dialog>
      </div>
      <el-dialog class="maindialog2" :visible.sync="dialogDetails" width="30%" z-index="10000">
        <template #title>
          <div style="font-weight:bold;font-size:20px;color: #fff;text-align: center;">
            新建用户抗定位任务
          </div>
        </template>
        <span class="dialogDetailstext">新建用户抗定位任务完成，任务执行需要一段时间，完成后将在消息框进行提示。</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {addTask} from '@/api/combatUser/antiLocalization'
  
  export default {
    props: {
      initData: {
        type: Object,
        default: {},
      },
    },
    watch: {
      'initData': function (val) {
        this.showData = val;
        this.dialogFormVisible = true;
        console.log('showDatashowDatashowData', this.showData);
      }
    },
    dicts: ['confuse_city'],
    data() {
      return {
        showData: {},
        dialogFormVisible: false,
        dialogDetails: false,
        input: "",
        form: {
          method: "社交内容混淆", //混淆类型
          targetLocation: '',//混淆后位置
          id:''
        },
        formLabelWidth: "180px",
      };
    },
    methods: {
      closeFn(){
        this.$emit('closeFn')
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.id=this.showData.id
            this.form.warnid=this.showData.id
            addTask(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              //路由跳转
              this.dialogFormVisible = false;
              this.$router.push('/networkUser/antiLocalization')
            });
          }
        });
      },
      showDetails() {
        this.dialogFormVisible = false;
        this.dialogDetails = true;
      },
      toestimate() {
        this.$router.push("/userestimate");
      },
    },
    mounted() {
  
    }
  };
  </script>
  
  <style scoped>
  .body2 {
    width: 100%;
    /* position: absolute; */
    padding: 10px;
    color: #90CEE9;
    font-size: 16px;
  }
  
  .tc {
    position: absolute;
    bottom: 50%;
    right: 25%;
    width: 350px;
    height: 200px;
    z-index: 1001;
  }
  
  .bg {
    width: 100%;
    height: 100%;
    background-image: url("~@/assets/xd/dialogbg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 10000;
  }
  
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20px;
    color: #ffffff;
    line-height: 7px;
    text-align: left;
    font-style: normal;
    text-align: center;
    padding: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
  }
  
  .bt {
    position: absolute;
    top: 80%;
    right: 10%;
    text-align: center;
    .bt1 {
      font-size: 13px;
      width: 80px;
      height: 30px;
      background: linear-gradient(270deg, #2DB2FD 0%, #0E5FFF 100%);
      border-radius: 2px 2px 2px 2px;
      border: none;
      color: #fff;
      text-align: center;
      line-height: 11px;
    }
  }
  
  .dialog-footer {
    text-align: center;
  
    .el-button {
      font-size: 13px;
      width: 100px;
      background: linear-gradient(270deg, #2DB2FD 0%, #0E5FFF 100%);
      border-radius: 2px 2px 2px 2px;
      border: none;
      color: #fff;
      text-align: center;
    }
  }
  
  .dialogDetailstext {
    font-size: 18px;
    font-weight: bolder;
    color: #fff;
  }
  
  .maindialog {
    .el-dialog__body {
      .el-descriptions__body {
        font-size: 17px
      }
  
      .el-checkbox__label {
        font-size: 18px;
        color: #fff;
      }
  
      .el-form-item__label {
        position: absolute;
        /* left: 5px; */
        width: 0;
        text-align: left;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
  
  .red-text {
    color: red;
  }
  </style>
  